/*
 * @Author: GEOWAY\zhaoweiwen 2565088230@qq.com
 * @Date: 2022-10-09 11:47:01
 * @LastEditors: GEOWAY\zhaoweiwen 2565088230@qq.com
 * @LastEditTime: 2022-10-09 14:45:23
 * @FilePath: \mapdemo\map-js-demo\leafletdemo\LvYouXiangCe\app.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
var mapCenter = [35.63452, 109.132287];

var mapSeverUrl = 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}';
var mapSeverUrlImg = 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}';
var streets = L.tileLayer(mapSeverUrl, {
    opacity: 1,
    zIndex: 0
}),
    terrain = L.tileLayer(mapSeverUrlImg, {
        opacity: 1,
        zIndex: 0
    });
// 创建地图实例
var map = L.map('map', {
    center: mapCenter,
    zoom: 5,
    minZoom: 1,
    maxZoom: 16,
    attributionControl: !1,
    // 展示两个图层
    layers: [streets, terrain]
});
var baseLayers = {
    暖色中国街道: terrain,
    冷色中国街道: streets
};
// marker icon
// 图标icon介绍两个网站可以下载:www.iconfont.cn 和 www.easyicon.net
var footIcon = L.icon({
    iconUrl: './foot.png',
    iconSize: [28, 28],
    iconAnchor: [10, 10]
});
L.control.layers(baseLayers).addTo(map);
$.get('./data.json', (res) => {
    console.log("res", res)
    drawFootPoint(res.rows);
   
})
function drawFootPoint(param) {
    param.forEach(item => {
        var p = item;
        var point = [p.latitude - 0, p.longitude - 0];
        L.marker(point, { icon: footIcon }).addTo(map)
            // 每个marker动态获取remark等信息，绑定弹窗
            .bindPopup(
                "<h3>" + p['city'] +
                "</h3>" + p['date'] +
                "<br>" + p['remark'] + "<br>"+
                generatePicHtml(p.imgs)
            );
    });
}
/**
 * veiwerjs预览大图
 */
 function viewPic() {

    var galley = document.getElementById('galley');
    var viewer = new Viewer(galley, {
        url: 'data-original',
        hidden: function () {
            viewer.destroy();
        }
    });
    viewer.show();
}
/**
 * 动态拼接html字符串
 * @param {string} cityName 城市名称
 * @param {*} imgs 足迹点数据中的imgs数组
 */
 function generatePicHtml(imgs) {
    // 动态拼接html字符串
    var _html = '<div id="galley"><ul class="pictures"  onclick="viewPic()">';
    // 循环图片数组，动态拼接项目的相对地址url
    for (var i = 0; i < imgs.length; i++) {
        var url =  imgs[i];
        var display = 'style="display:inline-block"';
        // 这里
        if (i > 5) {
            display = 'style="display:none"';
        }
        _html += '<li ' + display + '><img data-original="' + url + '" src="' + url + '" alt="图片预览"></li>';
    }
    _html += '</ul></div></div>';

    return _html;
}